<template>
  <div>
    <div>
      <h1>数据分析</h1>
      <!-- <div id="biao"></div> -->
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.get()
  },
  methods: {
    get() {
      let chartDom = document.getElementById('biao')
      let myChart = echarts.init(chartDom)
      let option
      option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '数据分析',
                fontSize: 60,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'pink',
                stroke: '#36d',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'pink',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: '#FEE7EA'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: '#FEE7EA'
                    }
                  }
                ]
              }
            }
          ]
        }
      }

      option && myChart.setOption(option)

    }

  },



}
</script>

<style lang="scss" scoped>
#biao {
  width: 700px;
  height: 100px;
}

h1 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 30px;

}
</style>